import { Component } from 'react';
import { NavBar, Toast, Button, Cell } from 'react-vant';
import WithRouter from '../../router/withRouter';
import './index.less'
import { getUserInfo, uploadUserImg, saveUser } from '../../api/user';
import MyLoading from '../../components/loading';
import { createRef } from 'react';
class UserInfo extends Component {
    fileRef = createRef();
    state = {
        info: null,
        nickname: ""
    }
    render() {
        let { info } = this.state;
        return (
            <div>
                {info && <div style={{ paddingTop: "50px" }} className='userfile'>
                    <NavBar
                        title="用户信息"
                        onClickLeft={() => this.props.router.navigate(-1)}
                        fixed
                    />
                    <div className='touxiang' onClick={() => this.uplaodFile()}>
                        <div>
                            头像
                        </div>
                        <div>
                            <img src={info.avatar} alt="" />
                        </div>
                    </div>
                    <div className='touxiang mycell'>
                        <div>
                            昵称
                        </div>
                        <div>
                            <input type="text" value={this.state.nickname} onChange={(e) => {
                                this.setState({
                                    nickname: e.target.value
                                })
                            }} />
                        </div>
                    </div>
                    <div className='touxiang mycell'>
                        <div>
                            手机号码
                        </div>
                        <div className='text'>
                            {info.phone}
                        </div>
                    </div>
                    <div className='touxiang mycell'>
                        <div>
                            ID号
                        </div>
                        <div className='text'>
                            2983
                        </div>
                    </div>
                    <div className='btn'>
                        <Button block type='primary' round onClick={() => this.save()}>保存修改</Button>
                    </div>
                    <div className='btn'>
                        退出登录
                    </div>
                    <input type="file" ref={this.fileRef} style={{ display: "none" }} onChange={(e) => this.fileChange(e)} />
                </div>}
                {
                    !info && <MyLoading></MyLoading>
                }
            </div>
        )
    }
    async componentDidMount() {
        let res = await getUserInfo();
        this.setState({
            info: res.data.data,
            nickname: res.data.data.nickname
        })
    }
    uplaodFile() {
        // 获取input标签
        console.dir(this.fileRef.current)
        this.fileRef.current.click();
    }
    async fileChange(e) {
        // 获取文件对象
        let file = e.target.files[0];
        //    创建formdata实例
        let data = new FormData();
        //   向formdata对象中追加属性 属性名为 上传文件的属性名 属性值为要上传的文件对象
        data.append("multipart", file)
        let res = await uploadUserImg(data);
        console.log(res)
        if (res.data.code === 200) {
            Toast.success("上传成功");
            this.state.info.avatar = res.data.data.url
            this.setState({
                info: this.state.info
            })
        } else {
            Toast.fail(res.data.message);
        }
    }
    async save() {
        let { info, nickname } = this.state;
        let avatar = info.avatar;
        let phone = info.phone;
        let data = {
            avatar,
            nickname,
            phone
        }
        let res = await saveUser(data);
        if (res.data.code === 200) {
            Toast.success("保存成功")
        } else {
            Toast.fail(res.data.message)
        }
    }
}
export default WithRouter(UserInfo);